<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注意点</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <my-car></my-car>
</div>
<hr>
</body>
<!--

        几个注意点:
            1.关于组件名:
                一个单词组成:
                    第一种写法(首字母小写):car 第二种写法(首字母大写):Car
                多个单词组成:
                    第一种写法(kebab-case命名):my-car
                    第二种写法(CamelCase命名):MyCar(需要Vue脚手架支持)
                备注:
                    (1).组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。
                    (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
            2.关于组件标签:
                    第一种写法:<Car></Car>
                    第二种写法:<Car/>
                    备注:不用使用脚手架时，<school/>会导致后续组件不能染。
            3.一个简写方式:
                    const school =Vue.extend(options)简写为:const school = options
-->

<script>
    <!-- 自定义car组件   -->
    const MyCar = {
        template: `<div><h1>{{carName}}</h1><h2>{{price}}</h2></div>`,
        data() {
            return {
                carName: "兰博基尼",
                price: 1000000,
            }
        }
    };
    new Vue({
        el: '#app',
        components: {
            // 'my-car是组件标签名,MyCar是组件变量名'
            "my-car": MyCar
        }
    });


</script>
</html>